<template>
  <view class="physical_store">
    <view style="background-color: #fff">
      <!-- banner -->
      <view class="swiperPro" v-if="imgUrls.length">
        <swiper
          ref="swiper"
          indicator-dots="true"
          :autoplay="true"
          indicator-color="rgba(255,255,255,0.6)"
          indicator-active-color="#fff"
        >
          <block class="block" v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
              <navigator :url="item.url" class="navigator" hover-class="none">
                <image :src="item.pic" class="slide-image" lazy-load></image>
              </navigator>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <!-- 当前位置 -->
      <view class="location pad20">
        <view class="address">
          <view class="add_desc">
            <uni-icons
              color="#FF7E2B"
              type="location-filled"
              size="26"
            ></uni-icons>
            <text class="text_add">{{ locationAddress }}</text>
          </view>
          <text class="edit_add" @click="chooseLocation">修改位置</text>
        </view>
      </view>
      <!-- 搜索 -->
      <view>
        <uni-search-bar
          v-model="name"
          @input="input"
          @cancel="cancel"
          placeholder="请输入店名"
        >
        </uni-search-bar>
      </view>
    </view>
    <!-- 店铺 -->
    <view class="productSort">
      <view class="aside">
        <scroll-view
          scroll-y="true"
          scroll-with-animation="true"
          style="height: 100%"
        >
          <view
            class="item acea-row row-center-wrapper"
            :class="item.id == navActive ? 'on' : ''"
            v-for="(item, index) in productList"
            :key="item.id"
            @click="tap(item)"
          >
            <text>{{ item.title }}</text>
          </view>
        </scroll-view>
      </view>
      <view class="conter">
        <scroll-view
          scroll-y="true"
          scroll-with-animation="true"
          style="height: 100%"
        >
          <!-- 标签    -->
          <view v-if="tabs.length" style="padding-bottom: 10rpx">
            <v-tabs
              :zIndex="1"
              height="60rpx"
              pillsColor="#fff"
              pills
              activeColor="red"
              :tabs="tabs"
              @change="changeTab"
              v-model="tabsCurrent"
            >
              <template slot-scope="row">{{ row.row.title }}</template>
            </v-tabs>
          </view>
          <!-- 商铺 -->
          <view class="shops" v-for="item in storeList" :key="item.id">
            <view class="img">
              <img v-if="item.storeCover" :src="item.storeCover" alt="" />
              <img v-else src="../activity/static/woman.png" alt="" />
            </view>
            <view class="content">
              <view class="title"> {{ item.name }} </view>
              <view class="add"> {{ item.address }} </view>
              <view class="map">
                <uni-icons
                  color="#FF7E2B"
                  type="location-filled"
                  size="20"
                ></uni-icons>
                <text class="text_add">{{ item.distance }}km</text>
              </view>
            </view>
            <view @click="enterShop(item)" class="import">
              <label>进店</label>
              <text class="showmap" @click="showMaoLocation(item)"
                >查看地图<uni-icons
                  color="red"
                  type="right"
                  size="12"
                ></uni-icons
              ></text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <wu-app-update></wu-app-update>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { toLogin } from "@/libs/login.js";
import {
  getCategoryList,
  getShopList,
  getBanners,
  userAddress,
} from "@/api/store.js";

export default {
  computed: mapGetters(["isLogin"]),
  data() {
    return {
      top: 0,
      tabsCurrent: 0,
      tabs: [],
      storeList: [],
      name: "",
      locationAddress: "",
      value: 0,
      imgUrls: [
        {
          url: "",
          pic: "/static/images/value.jpg",
        },
      ],
      //   默认数据
      productList: [
        {
          id: 1,
          level: 0,
          pid: 0,
          title: "美食餐饮",
        },
        {
          id: 2,
          level: 0,
          pid: 0,
          title: "KTV/酒吧",
          child: [],
        },
        {
          id: 3,
          level: 0,
          pid: 0,
          title: "足疗养身",
          child: [],
        },
        {
          id: 4,
          level: 0,
          pid: 0,
          title: "休闲娱乐",
          child: [],
        },
        {
          id: 5,
          level: 0,
          pid: 0,
          title: "蛋糕甜品",
          child: [],
        },
        {
          id: 6,
          level: 0,
          pid: 0,
          title: "奶茶店",
          child: [],
        },
        {
          id: 7,
          level: 0,
          pid: 0,
          title: "鲜花",
          child: [],
        },
        {
          id: 8,
          level: 0,
          pid: 0,
          title: "养车用车",
          child: [],
        },
        {
          id: 9,
          level: 0,
          pid: 0,
          title: "美容美发",
          child: [],
        },
        {
          id: 10,
          level: 0,
          pid: 0,
          title: "家居家装",
          child: [],
        },
      ],
      navActive: 1,
      children: -1,
      hightArr: [],
      params: {
        page: 1,
        limit: 100,
        type: 0,
        latitude: uni.getStorageSync("user_latitude") || "",
        longitude: uni.getStorageSync("user_longitude") || "",
      },
    };
  },
  onLoad() {
    this.getAllCategory();
    this.getShopListList();
    this.getBannersList();
  },

  onShow() {
    if (this.isLogin == false) {
      uni.navigateTo({
        url: "/pages/users/login/index",
      });
      // #ifdef H5
      toLogin();
      // #endif
    }
    if (!uni.getStorageSync("user_address")) {
      //#ifdef APP-PLUS
      this.getAppLocation();
      //#endif
      //#ifdef H5
      this.turnAdrr(this.params.longitude, this.params.latitude);

      //#endif
    } else {
      this.locationAddress = uni.getStorageSync("user_address");
    }
  },
  methods: {
    // 转地址
    turnAdrr(lon, lat) {
      userAddress(lon, lat).then((res) => {
        this.locationAddress = res.data;
        uni.setStorageSync("user_address", res.data);
      });
    },

    // app端获取位置信息
    getAppLocation() {
      const that = this;
      const appAuthorizeSetting = uni.getAppAuthorizeSetting();
      if (appAuthorizeSetting.locationAuthorized == "denied") {
        uni.showModal({
          title: "提示",
          content: "请打开定位服务功能",
          showCancel: false,
          success() {
            var main = plus.android.runtimeMainActivity();
            var Intent = plus.android.importClass("android.content.Intent");
            var Settings = plus.android.importClass(
              "android.provider.Settings"
            );
            var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
            main.startActivity(intent); // 打开系统设置GPS服务页面
          },
        });
      } else if (appAuthorizeSetting.locationAuthorized == "authorized") {
        uni.getLocation({
          type: "gcj02",
          geocode: true,
          success: (res) => {
            const { province, city, district, street, streetNum, poiName } =
              res.address;
            const _address = `${province ? province : ""}${city ? city : ""}${
              district ? district : ""
            }${street ? street : ""}${streetNum ? streetNum : ""}${
              poiName ? poiName : ""
            }`;
            that.locationAddress = _address;
            uni.setStorageSync("user_address", _address);
            uni.setStorageSync("user_latitude", res.latitude);
            uni.setStorageSync("user_longitude", res.longitude);
          },
          fail: (err) => {
            console.error("获取位置失败：", err);
          },
        });
      }
    },

    // 获取banner
    getBannersList() {
      getBanners({
        type: 52,
      }).then((res) => {
        this.imgUrls = res.data;
      });
    },
    // 修改位置
    chooseLocation() {
      const that = this;
      const latitude = uni.getStorageSync("user_latitude");
      const longitude = uni.getStorageSync("user_longitude");
      uni.chooseLocation({
        latitude,
        longitude,
        success: (res) => {
          that.locationAddress = res.address;
        },
      });
    },
    // 查看地图
    showMaoLocation(e) {
      let self = this;
      // #ifdef H5
      if (self.$wechat.isWeixin()) {
        self.$wechat
          .seeLocation({
            latitude: Number(e.latitude),
            longitude: Number(e.longitude),
          })
          .then((res) => {
            console.log("success");
          });
      } else {
        // #endif
        uni.openLocation({
          latitude: Number(e.latitude),
          longitude: Number(e.longitude),
          name: e.name,
          address: `${e.address}-`,
          success: function () {
            console.log("success");
          },
        });
        // #ifdef H5
      }
      // #endif
    },
    // 进店
    enterShop(item) {
      uni.navigateTo({
        url: `/pages/entity_alliance/store_desc?record=${JSON.stringify(item)}`,
      });
    },
    changeTab(e) {
      this.tabsCurrent = e;
      if (e) {
        this.children = this.tabs[e].id;
      } else {
        delete this.params.classify;
        delete this.params.pidClass;
        this.children = -1;
      }
      this.getShopListList();
    },
    tap: function (item) {
      this.navActive = item.id;
      this.children = -1;
      this.tabsCurrent = 0;
      this.tabs = [
        {
          id: -1,
          title: "全部",
        },
      ].concat(item.child);
      this.getShopListList();
    },
    // 获取侧边分类
    getAllCategory() {
      let that = this;
      return new Promise((resolve, reject) => {
        getCategoryList()
          .then((res) => {
            that.productList = res.data;
            that.navActive = res.data[0].id;
            that.tabs = [
              {
                id: -1,
                title: "全部",
              },
            ].concat(res.data[0].child);
            resolve(res);
          })
          .catch((err) => {
            that.$util.Tips({
              title: result.reason,
            });
            reject(err);
          });
      });
    },
    search() {},
    // 获取商铺列表
    async getShopListList() {
      let that = this;
      if (that.children != -1) {
        that.params.classify = that.children;
      }
      that.params.pidClass = that.navActive;
      uni.showLoading({
        title: "正在加载",
      });
      getShopList(that.params)
        .then((res) => {
          that.storeList = res.data.list;
          uni.hideLoading();
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    input(res) {
      this.params.name = res;
      this.getShopListList();
    },
    cancel(res) {
      delete this.params.name;
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style>
>>> .uni-searchbar__box {
  border-radius: 50px !important;
}

>>> .v-tabs__container-item {
  background: #f1f1f1;
  margin-right: 10rpx;
  border-radius: 15rpx;
}

>>> .active {
  border: 1px solid red;
  border-radius: 15rpx;
  background: #fdf2f0 !important;
}
</style>

<style lang="scss" scoped>
.search-box {
  // position: static;
  // z-index: 3;
}

.swiperPro {
  background-color: pink;
  height: 300rpx;

  swiper {
    height: 300rpx;
    width: 100%;

    .block,
    .navigator,
    .slide-image {
      height: 100%;
      width: 100%;
    }
  }
}

.location {
  .text {
    color: #84817b;
  }

  .address {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15rpx 0;
    font-weight: bold;

    .add_desc {
      display: flex;
      align-items: center;
      font-size: 32rpx;

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }

      .text_add {
        width: calc(100vw - 30rpx - 200rpx);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .edit_add {
      color: red;
    }
  }
}

.productSort {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 292px);
  //   #ifdef APP-PLUS
  height: calc(100vh - 300rpx - 62rpx - 74px);
  //   #endif
  overflow-y: hidden;
  background-color: red;
}

.productSort .aside {
  width: 180rpx;
  background-color: #f7f7f7;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}

.productSort .aside .item {
  height: 100rpx;
  width: 100%;
  font-size: 26rpx;
  color: #424242;
}

.productSort .aside .item.on {
  background-color: #fff;
  border-left: 4rpx solid #fc4141;
  width: 100%;
  text-align: center;
  color: #fc4141;
  font-weight: bold;
}

.productSort .conter {
  width: calc(100vw - 180rpx);
  background-color: #fff;
  padding: 0 20rpx;
  height: 100%;
  // #ifdef H5
  height: calc(100% - 45px);
  // #endif
  overflow-y: scroll;
  overflow-x: hidden;

  .shops {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f7f7f7;
    height: 180rpx;

    .img,
    img {
      width: 120rpx;
      height: 120rpx;
      margin-right: 10rpx;
      border-radius: 10rpx;
    }

    .content {
      width: calc(100% - 110rpx - 120rpx - 20rpx);

      .title {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .add {
        color: #84817b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 10rpx 0;
      }

      .map {
        display: flex;
        align-items: center;
        font-size: 23rpx;
        color: #84817b;

        image {
          width: 27rpx;
          height: 27rpx;
        }
      }
    }

    .import {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
	  height: 100%;
      color: red;
      label {
        width: 110rpx;
        background: #7bd9db;
        color: #fff;
        border-radius: 50px;
        font-weight: bold;
        text-align: center;
        padding: 8rpx;
      }
      .showmap {
        font-size: 23rpx;
      }
    }
  }
}

page,
body {
  height: 100%;
}
</style>
